
$(function () {
    $("#header").load("./header.html")
    $("#footer").load("./footer.html")

    //页面加载就要得到id,把id发送到后台得到id对应的数据
    let pid = location.search.split("?")[1].split("=")[1];
    //再把数据渲染到页面
    $.get(`./api/productinfo/${pid}`).then((res) => {
        // console.log(res)
        // console.log(res[0].p_imgs[0])
        // 把服务器那边得到的数据藏起来
        $(".itemAttr")[0].dataInfo = res[0];

        $(".imgBox .middle-pic li:eq(0)").addClass("active")
        $(".imgBox .middle-pic li img ").each((index, el) => {
            $(el).attr("src", res[0].p_imgs[index])
        })
        $(".imgBox .small-pic li:eq(0)").addClass("selected")
        $(".imgBox .small-pic li img ").each((index, el) => {
            $(el).attr("src", res[0].p_imgs[index])
        })
        $("#p_name").text(res[0].p_name)
        $("#p_brand").text(res[0].p_brand)
        $("#p_model").text(res[0].p_model)
        $("#p_price").text(res[0].p_price)
        // $("#p_models span").each((index,el)=>{
        //     $(el).text(res[0].p_models[index])
        // })
        // $("#p_models span:eq(0)").addClass("active");

        // 动态型号
        if (res[0].p_models == null || res[0].p_models == undefined) {
            $("#p_models").parent().remove();
        } else {
            var modelHtml = '';
            res[0].p_models.forEach((el) => {

                modelHtml += `<span class='model'>${el}</span>`
            })
            $("#p_models").html(modelHtml)
            $("#p_models span:eq(0)").addClass("active");

        }

        if (res[0].p_colors == null || res[0].p_colors == undefined) {
            $("#p_colors").parent().remove();
        } else {
            // 动态颜色
            var colorHtml = '';
            res[0].p_colors.forEach((el) => {
                colorHtml += `<span class='color'>${el}</span>`
            })
            $("#p_colors").html(colorHtml)
            $("#p_colors span:eq(0)").addClass("active");

        }
        $(".pic .pname").text(res[0].p_name)
        $(".pic .picCenter img ").each((index, el) => {
            $(el).attr("src", res[0].p_center_imgs[index])
        })
    })


    // 绑定点击委托事件
    $(".itemAttr").on("click", ".model", function () {
        $(this).addClass("active").siblings().removeClass("active")
    })
    $(".itemAttr").on("click", ".color", function () {
        $(this).addClass("active").siblings().removeClass("active")
    })
    // 数量的减
    $(".itemAttr .number").on("click", ".decrease", function () {
        var num = $(this).next("#p_number").val()
        if (num <= 1) {
            return;
        }
        $(this).next("#p_number").val(--num);
        // $(this).addClass("active").siblings().removeClass("active")
    })
    // 数量的加

    $(".itemAttr .number").on("click", ".increase", function () {
        var num = $(this).prev("#p_number").val()

        $(this).prev("#p_number").val(++num);
        // $(this).addClass("active").siblings().removeClass("active")
    })
    // 加入购物车的点击事件

    $(".itemAttr .opration").on("click", ".toCart", function () {
        var saveObj = $(this).parents(".itemAttr")[0].dataInfo;
        // console.log(saveObj)
        delete (saveObj.p_imgs);
        // delete (saveObj.p_img_index);
        delete (saveObj.p_center_imgs);
        delete (saveObj.p_models);
        delete (saveObj.p_colors);
        saveObj.p_num = $("#p_number").val()
        saveObj.u_id = JSON.parse(localStorage.getItem("userinfo")).u_id;
        // saveObj.p_id = JSON.parse(localStorage.getItem("userinfo")).p_id;

        console.log(saveObj)
        console.log(saveObj.p_id)
        $.ajax({
            url: "./api/addcart",
            type: "post",
            data: saveObj
        }).then(function (res) {
            layer.msg("加入购物车成功")
            console.log(res)
        })


        $.ajax({
            url: "./api/getcarts",
            data: {
                u_id: JSON.parse(localStorage.getItem("userinfo")).u_id
            }
        }).then(function (res) {
            // console.log(res.data)
            loadCart(res.data)
            loadAccount(res.data)
        })
        var account = 0
        function loadCart(arr) {
            arr.forEach((ele) => {
                var strHtml = "";

                strHtml += `
                    <p class='count'>金额总计:
                    <span class='zongji'>${account}</span></p> 
                    <div class='cartList clearFixed'>
                        <span class='delete'>×</span>
                        <img src="${ele.p_img}">
                        <p class='nameTitle'>${ele.p_name}</p>
                        <p class='proPrice'>${ele.p_price} ×${ele.p_num}</p>
                    </div>
                    `
            })

            $(".nav .carts .listBox").find(".carttip").append(strHtml)

            if (arr.length < 1) {
                var str = "";
                str += `<div class='ulBotm'>
                    <a href="./cart.html"><span class='check'>查看购物车&gt;&gt;</span></a>
                    <span class='buyIt'>立即购买</span>       
                    </div>`
                $(".nav .carts .listBox").find(".carttip").append(str)
            }
        }
        function loadAccount(arr) {
            arr.forEach((ele) => {
                account += parseInt(ele.p_total)
                // single = ele.p_total
                // console.log(single)
                // account="￥"+account+".00"
            })
        }



    })

    // // 获取商品的属性至页面
    // tab栏加入购物车






    // 固定导航栏
    $(document).on("scroll", function () {
        var $side = $(".ulLine").offset().top;
        // console.log("top" + $side)

        var $changeSide = $(document).scrollTop();

        if ($side <= $changeSide) {
            //    克隆的存在就不再克隆
            if ($(".lineFixed").length) {
                return;
            }
            // 克隆导航栏内容
            var $cloUlFixed = $(".ulLine").clone(true);
            $cloUlFixed.addClass("lineFixed")
            $(".liCon").append($cloUlFixed)
            $cloUlFixed.css({
                "position": "fixed",
                "top": "0px",
                "backgroundColor": "#606982"
            })
            $cloUlFixed.find(".active").css({
                "backgroundColor": "#fff",
                "color": "#000"
            })

            $cloUlFixed.find(".add").css({
                "backgroundColor": "#f56215",
                "display": "block"
            })
            $cloUlFixed.find("li").addClass("liFixed")
        } else {
            // 将克隆的固定导航栏移除
            $(".lineFixed").remove();

        }
    })
    $(".add").on("mouseenter", function () {

        // // 创建商品图片
        // var $img = $("<img>")
        // $img.attr("src", "./images/detailsPic/toCartPic.jpg")
        // $(".goods").append($img)

        // $(".goods").append($(`<p class='nameTitle'>${loadData[i].name}</p>`))
        // //创建商品价格
        // $(".goods").append($(`<p class='proPrice'>${loadData[i].price}</p>}`)) 

        $(".goods").show();
    })
    $(".add").on("mouseleave", function () {
        $(".goods").hide();
    })


    // 二维码

    $(".smallImgCode").on("mouseenter",function () {
        $(".bigImgCode").show()
    })
    $(".smallImgCode").on("mouseleave",function () {
        $(".bigImgCode").hide()
    })
    // 商品图片移入鼠标样式及大图变化
    $(".small-pic ul").on("mouseenter", "li", function () {
        var $liIndex = $(this).index();
        $(this).addClass("selected").siblings("li").removeClass("selected")
        $(".middle-pic li").eq($liIndex).addClass("active").siblings("li").removeClass("active");
    })

    // 点击箭头动画改变ul的left值
    $(".arrLeft").on("click", function () {
        // var $
        $(".small-pic ul").animate({
            left: -2 * 84,
        })
    })
    $(".arrRight").on("click", function () {
        // var $
        $(".small-pic ul").animate({
            left: 0,
        })
    })


})
